<template>
	<div class="layout_wrap">
		<div class="header" ref="header_view">
			<Header></Header>
		</div>
		<main class="main">
			<div class="left_view" ref="left_view" :style="{height: l_Height+'px'}">
				<Nav></Nav>
			</div>
			<div class="right_view" ref="right_view" :style="{height: r_Height+'px'}">
				<!-- tab -->
				<div ref="tab_box_view">
					<Tab />
				</div>
				<!-- 路由视图区 -->
				<div class="router_view" :style="{height: router_Heigth +'px'}">
					<div class="router_content">
						<transition :name="transitionName">
							<keep-alive>
								<router-view class="Router" v-if="$route.meta.keepAlive" />
							</keep-alive>
						</transition>
						<transition :name="transitionName">
							<router-view class="Router" v-if="!$route.meta.keepAlive" />
						</transition>
					</div>
					<!-- loadding动画 -->
					<Loadding v-if="is_show_loadding"></Loadding>
				</div>
			</div>
		</main>
	</div>
</template>

<script>
	import Header from './header';
	import Nav from './nav';
	import Loadding from './loadding';
	import Tab from './tab';

	export default {
		data() {
			return {
				l_Height: 0,
				r_Height: 0,
				router_Heigth: 0, //路由视图区的高度
				transitionName: 'slide-left',
				is_show_loadding: true,
				router_list: [],
			};
		},
		computed: {
			navHeight() {

			},
		},
		components: {
			Header,
			Nav,
			Loadding,
			Tab,
		},
		watch: {
			'$route' (to, from) {
				let n = 0,
					t = 0,
					f = 0;
				this.router_list.forEach((x, indexX) => {
					if(to.fullPath == x.fullPath) n++, t = indexX;
					if(from.fullPath == x.fullPath) f = indexX;
				});
				if(n == 0) this.router_list.push(to);
				if(t > f) {
					this.transitionName = 'slide-right'
				} else {
					this.transitionName = 'slide-left'
				}
			},
		},
		created() {
			this.router_list.push(this.$route);

			setTimeout(() => {
				this.is_show_loadding = false;
			}, 3000);
		},
		mounted() {

			this.init();
		},
		methods: {
			init() {
				//				console.log(this, this.getViewportSize)

				this.$nextTick(() => {
					this.r_Height = this.l_Height = this.getViewportSize().height - this.$refs.header_view.offsetHeight;
					this.router_Heigth = this.r_Height - this.$refs.tab_box_view.offsetHeight;
				});
				// console.log(this.router_Heigth)
			},
		},
	};
</script>
<style lang="scss" scoped>
	/*@import "../../public/css/commonstyle.css";*/
	
	.layout_wrap {
		.header {}
		.main {
			display: flex;
			justify-content: space-between;
			.left_view {
				height: 300px;
			}
			.right_view {
				flex: 1;
				overflow: hidden;
				.router_view {
					padding: 6px;
					position: relative;
					.router_content {
						height: 100%;
						overflow: auto;
						position: relative;
						box-sizing: border-box;
					}
				}
			}
		}
	}
	
	// 路由动画
	.Router {
		position: absolute;
		width: 100%;
		transition: all 0.5s ease;
	}
	
	.slide-left-enter,
	.slide-right-leave-active {
		opacity: 0;
		-webkit-transform: translate(100%, 0);
		transform: translate(100%, 0);
	}
	
	.slide-left-leave-active,
	.slide-right-enter {
		opacity: 0;
		-webkit-transform: translate(-100%, 0);
		transform: translate(-100% 0);
	}
</style>